<template>
	<view class="me">
		<view class="userinfo">
			<template v-if="!hasUserInfo">
				<button v-if="canIUseGetUserProfile" @tap="getUserProfile"> 获取头像昵称 </button>
				<button v-else open-type="getUserInfo" @getuserinfo="getUserInfo"> 获取头像昵称 </button>
			</template>

			<template v-else>
				<view class="user-box">
					<image class="userinfo-avatar" :src="userInfo.avatarUrl" mode="cover"></image>
					<text class="userinfo-nickname">{{userInfo.nickName}}</text>
				</view>
			</template>

			<button @tap="testHandler">测试小程序的云函数调用</button>
			<!-- 			<uni-badge text="100"></uni-badge>
			<uni-badge size="small" :text="100" absolute="rightTop" type="primary">
				<button type="default">右上</button>
			</uni-badge> -->
		</view>
	</view>
</template>

<script>
	export default {
		name: 'me',
		data() {
			return {
				userInfo: {},
				hasUserInfo: false,
				canIUseGetUserProfile: false,
			}
		},
		onLoad() {
			console.log('用户是否已经登陆：', this.$store.state.isLogin)
			if (uni.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
		},
		methods: {
			getUserProfile(e) {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						this.userInfo = res.userInfo,
							this.hasUserInfo = true
					}
				})
			},
			getUserInfo(e) {
				// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
				this.userInfo = e.detail.userInfo,
					this.hasUserInfo = true

			},
			testHandler() {
				wx.cloud.callFunction({
					name: 'test',
					data: {
						msg: 'Hi'
					},
					success(res) {
						console.log('uni中调用云函数：', res)
					},
					fail(err) {
						console.log('uni调用失败:', err)
					}
				})
			}
		}
	}
</script>

<style scoped>
	.me {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.userinfo {
		width: 750rpx;
		height: 100vh;
	}

	.user-box {
		display: flex;
		width: 750rpx;
		height: 300rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.userinfo-avatar {
		display: block;
		width: 200rpx;
		height: 200rpx;
		border-radius: 100rpx;
		
	}

	.userinfo-nickname{
		font-size: 50rpx;
		display: block;
	}
</style>
